<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
    <script type="text/javascript" src="./../vue.js/day.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>显示格式化后的时间</h2>

      <!-- 计算属性实现 -->
      <h3>现在是:{{fmtTime}}</h3>

      <!-- methods实现 -->
      <h3>现在是:{{getFmtTime()}}</h3>

      <!-- 过滤器实现 -->
      <h3>现在是:{{time | timeForMater}}</h3>

      <!-- 过滤器实现(传参) -->
      <h3>现在是:{{time | timeForMater('YYYY_MM_DD') | mySlice}}</h3>
    </div>

    <div id="root2">
      <h2>{{msg | mySlice}}</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          time: Date.now(),
          msg: "你好,尚硅谷",
        },
        computed: {
          fmtTime() {
            return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
          },
        },
        methods: {
          getFmtTime() {
            return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
          },
        },
        //局部过滤器
        filters: {
          timeForMater(value, str = "YYYY年MM月DD日 HH:mm:ss") {
            console.log("@", value);
            return dayjs(value).format(str);
          },
        },
      });
    </script>
  </body>
</html>

<!-- 
	过滤器:
		定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).
		语法:
				1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
				2.使用过滤器:{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
		备注:
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据, 是产生新的对应的数据

	第三方库:
		Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期
		Day.js		是一个 轻量的处理处理时间和日期的 JavaScript 库, 和 Moment.js 的 API 设计保持完全一样.
							如果您曾经用过 Moment.js, 那么您已经知道如果使用 Day.js
-->
